<template>
  <div style="background-color: #3c2d28">
    <van-cell-group inset style="background-color: #3c2d28;height: 80px;display: flex;align-items: center">
      <div style="display: flex;align-items: center;">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <van-image
            round
            width="50"
            height="50"
            fit="cover"
            :src="user.avatarUrl"
        />
        <div style="margin-left: 10px">
          <div style="margin-bottom: 5px;color: #fff;font-size: 14px;display: flex;align-items: center">
            {{ user.username }} ({{ user.phone.slice(0, 3) + '*****' + user.phone.slice(-4) }})

            <van-image src="http://120.26.146.100:8889/public/member.png"
                       style="margin-left:2px;width: 18px;height: 18px" v-if="user.userStatus == 2"/>
            <van-image src="http://120.26.146.100:8889/public/nomember.png"
                       style="margin-left:2px;width: 18px;height: 18px" v-else/>
          </div>
          <div style="color: #7c7873;font-size: 12px;margin-bottom: 5px">
            开通码猴VIP会员，享受更多权益
          </div>
        </div>
      </div>
    </van-cell-group>

    <div style="margin-top:5px;background-color: #ffffff;border-radius: 12px 12px 0 0;">
      <div style="display: flex;flex-direction: column;margin-left: 5px;margin-right: 5px;padding: 5px">
        <!-- 广告/优惠，最好是读取数据库的！ 图片-->
        <div class="banner">
          <img src="http://120.26.146.100:8889/public/member_center_banner.png" alt="Banner" style="width: 100%;height: 60px;border-radius: 6px">
        </div>

        <div style="color: #775d60;font-size: 12px;margin-top: 5px;">
          手机/电脑/平板 均可以使用
        </div>

        <!-- 价格+优惠 横向选择 -->
        <el-scrollbar>
          <div class="scrollbar-flex-content-price">
            <div class="scrollbar-demo-item-price">
              <span style="font-size: 17px;font-weight: bold;">连续包月</span>
              <span style="margin-top: 5px;margin-bottom: 5px;color: red;font-size: 24px;">¥4.8</span>
              <span style="font-size: 13px;">限时优惠</span>
            </div>
            <div class="scrollbar-demo-item-price">
              <span style="font-size: 17px;font-weight: bold;">连续包月</span>
              <span style="margin-top: 5px;margin-bottom: 5px;color: red;font-size: 24px;">¥4.8</span>
              <span style="font-size: 13px;">限时优惠</span>
            </div>
            <div class="scrollbar-demo-item-price">
              <span style="font-size: 17px;font-weight: bold;">连续包月</span>
              <span style="margin-top: 5px;margin-bottom: 5px;color: red;font-size: 24px;">¥4.8</span>
              <span style="font-size: 13px;">限时优惠</span>
            </div>
            <div class="scrollbar-demo-item-price">
              <span style="font-size: 17px;font-weight: bold;">连续包月</span>
              <span style="margin-top: 5px;margin-bottom: 5px;color: red;font-size: 24px;">¥4.8</span>
              <span style="font-size: 13px;">限时优惠</span>
            </div>
          </div>
        </el-scrollbar>


        <div style="margin-top: 10px;font-size: 14px">
          每期<span style="color: #d35250">自动续费</span>, 可以取消
        </div>

        <!-- 支付方式(微信/支付宝) 单选框 -->
        <div style="margin-top: 14px;margin-bottom: 14px">

          <div style="display: flex;justify-content: space-between;align-items: center">
            <!-- 支付宝 -->
            <div style="display: flex;align-items: center;">
              <svg t="1726307416614" class="icon" viewBox="0 0 1024 1024"
                   version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4250" width="25" height="25">
                <path
                    d="M1023.998645 722.823529c-41.968941-13.025882-298.736941-91.226353-359.04753-113.408C704.510645 540.536471 732.188762 462.381176 752.95488 376.470588H527.072527v-75.294117h271.043765v-45.176471H527.072527V120.470588h-103.107765C406.601939 120.470588 406.601939 135.529412 406.601939 135.529412v120.470588H135.543115v45.176471h271.058824v75.294117H180.719586v45.176471h436.705882c-15.856941 54.784-33.942588 103.664941-59.075764 150.437647C461.144998 539.542588 406.601939 511.277176 287.396292 499.952941 61.257939 478.373647 9.124292 609.912471 1.022645 686.923294-11.220179 804.171294 87.520527 903.529412 240.95488 903.529412c153.404235 0 258.861176-75.158588 356.080941-194.529883C721.602409 769.249882 1023.998645 903.529412 1023.998645 903.529412V722.823529z m-796.325647 102.957177c-162.123294 0-187.798588-103.785412-179.154824-147.169882C56.966174 635.376941 105.621233 575.247059 195.778409 575.247059c103.559529 0 189.801412 32.331294 301.176471 87.341176-78.215529 103.288471-169.502118 163.192471-269.281882 163.192471z"
                    fill="#00A1E9" p-id="4251"></path>
              </svg>
              <span style="margin-left: 10px;font-size: 18px;">支付宝</span>
              <van-tag type="danger" style="margin-left: 8px">推荐</van-tag>
            </div>
            <van-checkbox @click="weixin = false" v-model="zhifubao" style="margin-right: 15px" icon-size="25px"/>
          </div>

          <!-- 微信 -->
          <div style="display: flex;justify-content: space-between;align-items: center">
            <div style="margin-top: 8px;display: flex;align-items: center;">
              <svg t="1726307469015" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="5207" width="24" height="24">
                <path
                    d="M964.16 294.4c-3.328-5.568-5.888-5.76-11.168-2.528-17.44 10.56-35.168 20.64-52.864 30.752-45.024 25.76-90.144 51.424-135.2 77.184-53.344 30.464-106.688 60.896-159.936 91.488-75.328 43.264-150.56 86.656-225.856 129.984-21.056 12.096-41.184 5.6-51.232-16.48-8.448-18.432-16.992-36.832-25.44-55.264-21.92-48.032-43.84-96.064-65.696-144.128-4.032-8.864-2.528-15.264 4.16-20.8 6.304-5.28 13.824-5.248 21.568 0.256 35.136 24.864 70.08 49.92 105.376 74.56 15.84 11.072 33.12 12.64 51.008 4.8 45.824-20.16 91.648-40.224 137.376-60.48 64.928-28.8 129.728-57.76 194.624-86.528a30516.544 30516.544 0 0 1 165.056-72.8c7.136-3.104 7.616-5.44 2.56-11.104-40.96-45.664-89.376-81.248-144.32-108.864a568.64 568.64 0 0 0-159.488-52.064c-33.728-5.856-67.84-9.536-99.712-7.68-45.92-1.28-88.576 3.968-130.976 13.088a560.096 560.096 0 0 0-98.976 30.784c-85.76 35.904-157.696 89.216-211.008 165.76C30.816 336.32 8.352 405.12 7.776 480.48a340.96 340.96 0 0 0 15.264 102.656c20.16 66.24 56.832 122.016 106.176 170.24 16.832 16.416 35.136 31.072 53.792 45.28 11.584 8.8 15.552 20.704 12.224 34.048-6.752 27.136-14.72 54.016-22.144 80.992l-3.648 13.696a15.776 15.776 0 0 0 6.304 17.792c6.496 4.544 13.76 3.424 20.576-0.48 36.352-20.8 72.704-41.6 109.12-62.272 10.624-6.048 21.888-10.528 34.432-8.032 9.312 1.824 18.496 4.416 27.68 6.912 39.36 10.656 79.616 15.808 120.288 17.216 41.248 1.408 82.304-0.64 123.2-7.424 34.112-5.632 67.584-13.504 99.872-25.216 58.976-21.344 113.568-50.72 161.6-91.424 66.944-56.64 113.856-125.6 134.88-211.104a349.12 349.12 0 0 0 5.184-139.2c-7.36-46.304-24.224-89.44-48.416-129.792"
                    fill="#0DC803" p-id="5208"></path>
              </svg>
              <span style="margin-left: 10px;font-size: 18px;">微信支付</span>
            </div>
            <van-checkbox @click="zhifubao = false"  v-model="weixin" style="margin-right: 15px" icon-size="25px"/>
          </div>
          <!-- 价格+立即开通+优惠多少 按钮 -->
        </div>
        <van-button type="danger" round>¥4.8 立即开通</van-button>


        <!-- 阅读并确认协议 -->
        <div style="display: flex;align-items: center;justify-content: center;margin-top: 8px">
          <van-checkbox v-model="agree" style="margin-right: 5px" icon-size="18px"/>
          <a style="font-size: 12px;color: #bbbbbb;text-decoration: underline;"
             href="/protocol" >阅读并确认《付费会员服务协议》《自动续费服务协议》</a>
        </div>

        <!-- 特权详情 -->
        <div style="font-weight: bold;font-size: 18px;margin-top: 25px">
          黑胶VIP尊享20+项特权
        </div>

        <el-scrollbar class="el-scrollbarService" style="background-color: #f9f9f9;height: 150px;margin-top: 10px">
          <div class="scrollbar-flex-content">

            <div style="display: flex;flex-direction: column;">

              <div class="scrollbar-demo-item">
                <svg t="1726330555019" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="13325" data-spm-anchor-id="a313x.search_index.0.i31.c09c3a81rQZBkx"
                     width="30" height="30">
                  <path d="M512 1024C229.233778 1024 0 794.766222 0 512S229.233778 0 512 0s512 229.233778 512 512-229.233778 512-512 512z m306.915556-619.008a87.509333 87.509333 0 0 0-18.574223-33.066667c-8.419556-9.358222-19.100444-16.682667-32.028444-21.973333-12.913778-5.290667-28.273778-7.964444-46.051556-7.964444h-76.273777a28.444444 28.444444 0 0 0-28.444445 28.444444V662.613333a24.192 24.192 0 0 0 48.384 0v-112.312889h46.762667c20.096 0 37.233778-2.545778 51.427555-7.608888 14.193778-5.048889 25.770667-12.188444 34.830223-21.390223a82.545778 82.545778 0 0 0 19.768888-32.952889c4.096-12.771556 6.172444-26.88 6.172445-42.311111 0-14.648889-1.976889-28.316444-5.973333-41.031111z m-61.724445 89.543111c-10.183111 10.368-25.031111 15.544889-44.515555 15.544889h-46.279112V381.724444h40.206223c12.16 0 23.466667 1.792 34.033777 5.376a42.168889 42.168889 0 0 1 23.836445 19.754667c5.347556 9.585778 8.049778 22.471111 8.049778 38.684445 0 22.286222-5.105778 38.613333-15.317334 48.981333z m-431.146667 121.898667l-68.437333-249.528889a33.863111 33.863111 0 0 0-32.668444-24.903111 19.299556 19.299556 0 0 0-18.503111 24.775111l87.537777 296.149333a33.322667 33.322667 0 0 0 31.957334 23.864889 33.379556 33.379556 0 0 0 32-23.850667l88.547555-297.528888a18.204444 18.204444 0 0 0-17.464889-23.409778c-14.464 0-27.164444 9.585778-31.146666 23.480889l-71.822223 250.951111z m191.800889-274.432c-13.368889 0-24.192 10.823111-24.192 24.192v296.405333a24.192 24.192 0 0 0 48.384 0V366.193778c0-13.368889-10.837333-24.192-24.192-24.192z" fill="#4b2321" p-id="13326" data-spm-anchor-id="a313x.search_index.0.i32.c09c3a81rQZBkx" class=""></path></svg>
                <div style="display:flex;flex-direction:column;align-items: flex-start;margin-left: 15px;">
                  <div>队伍翻倍</div>
                  <div style="font-size: 13px;color: #c1c2c0;">可以创建更多队伍</div>
                </div>
              </div>

              <div class="scrollbar-demo-item">
                <svg t="1726330555019" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="13325" data-spm-anchor-id="a313x.search_index.0.i31.c09c3a81rQZBkx"
                     width="30" height="30">
                  <path d="M512 1024C229.233778 1024 0 794.766222 0 512S229.233778 0 512 0s512 229.233778 512 512-229.233778 512-512 512z m306.915556-619.008a87.509333 87.509333 0 0 0-18.574223-33.066667c-8.419556-9.358222-19.100444-16.682667-32.028444-21.973333-12.913778-5.290667-28.273778-7.964444-46.051556-7.964444h-76.273777a28.444444 28.444444 0 0 0-28.444445 28.444444V662.613333a24.192 24.192 0 0 0 48.384 0v-112.312889h46.762667c20.096 0 37.233778-2.545778 51.427555-7.608888 14.193778-5.048889 25.770667-12.188444 34.830223-21.390223a82.545778 82.545778 0 0 0 19.768888-32.952889c4.096-12.771556 6.172444-26.88 6.172445-42.311111 0-14.648889-1.976889-28.316444-5.973333-41.031111z m-61.724445 89.543111c-10.183111 10.368-25.031111 15.544889-44.515555 15.544889h-46.279112V381.724444h40.206223c12.16 0 23.466667 1.792 34.033777 5.376a42.168889 42.168889 0 0 1 23.836445 19.754667c5.347556 9.585778 8.049778 22.471111 8.049778 38.684445 0 22.286222-5.105778 38.613333-15.317334 48.981333z m-431.146667 121.898667l-68.437333-249.528889a33.863111 33.863111 0 0 0-32.668444-24.903111 19.299556 19.299556 0 0 0-18.503111 24.775111l87.537777 296.149333a33.322667 33.322667 0 0 0 31.957334 23.864889 33.379556 33.379556 0 0 0 32-23.850667l88.547555-297.528888a18.204444 18.204444 0 0 0-17.464889-23.409778c-14.464 0-27.164444 9.585778-31.146666 23.480889l-71.822223 250.951111z m191.800889-274.432c-13.368889 0-24.192 10.823111-24.192 24.192v296.405333a24.192 24.192 0 0 0 48.384 0V366.193778c0-13.368889-10.837333-24.192-24.192-24.192z" fill="#4b2321" p-id="13326" data-spm-anchor-id="a313x.search_index.0.i32.c09c3a81rQZBkx" class=""></path></svg>
                <div style="display:flex;flex-direction:column;align-items: flex-start;margin-left: 15px;">
                  <div>队伍翻倍</div>
                  <div style="font-size: 13px;color: #c1c2c0;">可以创建更多队伍</div>
                </div>
              </div>

            </div>

            <div style="display: flex;flex-direction: column;">

              <div class="scrollbar-demo-item">

                <svg t="1726330555019" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="13325" data-spm-anchor-id="a313x.search_index.0.i31.c09c3a81rQZBkx"
                     width="30" height="30">
                  <path d="M512 1024C229.233778 1024 0 794.766222 0 512S229.233778 0 512 0s512 229.233778 512 512-229.233778 512-512 512z m306.915556-619.008a87.509333 87.509333 0 0 0-18.574223-33.066667c-8.419556-9.358222-19.100444-16.682667-32.028444-21.973333-12.913778-5.290667-28.273778-7.964444-46.051556-7.964444h-76.273777a28.444444 28.444444 0 0 0-28.444445 28.444444V662.613333a24.192 24.192 0 0 0 48.384 0v-112.312889h46.762667c20.096 0 37.233778-2.545778 51.427555-7.608888 14.193778-5.048889 25.770667-12.188444 34.830223-21.390223a82.545778 82.545778 0 0 0 19.768888-32.952889c4.096-12.771556 6.172444-26.88 6.172445-42.311111 0-14.648889-1.976889-28.316444-5.973333-41.031111z m-61.724445 89.543111c-10.183111 10.368-25.031111 15.544889-44.515555 15.544889h-46.279112V381.724444h40.206223c12.16 0 23.466667 1.792 34.033777 5.376a42.168889 42.168889 0 0 1 23.836445 19.754667c5.347556 9.585778 8.049778 22.471111 8.049778 38.684445 0 22.286222-5.105778 38.613333-15.317334 48.981333z m-431.146667 121.898667l-68.437333-249.528889a33.863111 33.863111 0 0 0-32.668444-24.903111 19.299556 19.299556 0 0 0-18.503111 24.775111l87.537777 296.149333a33.322667 33.322667 0 0 0 31.957334 23.864889 33.379556 33.379556 0 0 0 32-23.850667l88.547555-297.528888a18.204444 18.204444 0 0 0-17.464889-23.409778c-14.464 0-27.164444 9.585778-31.146666 23.480889l-71.822223 250.951111z m191.800889-274.432c-13.368889 0-24.192 10.823111-24.192 24.192v296.405333a24.192 24.192 0 0 0 48.384 0V366.193778c0-13.368889-10.837333-24.192-24.192-24.192z" fill="#4b2321" p-id="13326" data-spm-anchor-id="a313x.search_index.0.i32.c09c3a81rQZBkx" class=""></path></svg>
                <div style="display:flex;flex-direction:column;align-items: flex-start;margin-left: 15px;">
                  <div>队伍翻倍</div>
                  <div style="font-size: 13px;color: #c1c2c0;">可以创建更多队伍</div>
                </div>

              </div>

              <div class="scrollbar-demo-item">

                <svg t="1726330555019" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="13325" data-spm-anchor-id="a313x.search_index.0.i31.c09c3a81rQZBkx"
                     width="30" height="30">
                  <path d="M512 1024C229.233778 1024 0 794.766222 0 512S229.233778 0 512 0s512 229.233778 512 512-229.233778 512-512 512z m306.915556-619.008a87.509333 87.509333 0 0 0-18.574223-33.066667c-8.419556-9.358222-19.100444-16.682667-32.028444-21.973333-12.913778-5.290667-28.273778-7.964444-46.051556-7.964444h-76.273777a28.444444 28.444444 0 0 0-28.444445 28.444444V662.613333a24.192 24.192 0 0 0 48.384 0v-112.312889h46.762667c20.096 0 37.233778-2.545778 51.427555-7.608888 14.193778-5.048889 25.770667-12.188444 34.830223-21.390223a82.545778 82.545778 0 0 0 19.768888-32.952889c4.096-12.771556 6.172444-26.88 6.172445-42.311111 0-14.648889-1.976889-28.316444-5.973333-41.031111z m-61.724445 89.543111c-10.183111 10.368-25.031111 15.544889-44.515555 15.544889h-46.279112V381.724444h40.206223c12.16 0 23.466667 1.792 34.033777 5.376a42.168889 42.168889 0 0 1 23.836445 19.754667c5.347556 9.585778 8.049778 22.471111 8.049778 38.684445 0 22.286222-5.105778 38.613333-15.317334 48.981333z m-431.146667 121.898667l-68.437333-249.528889a33.863111 33.863111 0 0 0-32.668444-24.903111 19.299556 19.299556 0 0 0-18.503111 24.775111l87.537777 296.149333a33.322667 33.322667 0 0 0 31.957334 23.864889 33.379556 33.379556 0 0 0 32-23.850667l88.547555-297.528888a18.204444 18.204444 0 0 0-17.464889-23.409778c-14.464 0-27.164444 9.585778-31.146666 23.480889l-71.822223 250.951111z m191.800889-274.432c-13.368889 0-24.192 10.823111-24.192 24.192v296.405333a24.192 24.192 0 0 0 48.384 0V366.193778c0-13.368889-10.837333-24.192-24.192-24.192z" fill="#4b2321" p-id="13326" data-spm-anchor-id="a313x.search_index.0.i32.c09c3a81rQZBkx" class=""></path></svg>
                <div style="display:flex;flex-direction:column;align-items: flex-start;margin-left: 15px;">
                  <div>队伍翻倍</div>
                  <div style="font-size: 13px;color: #c1c2c0;">可以创建更多队伍</div>
                </div>

              </div>

            </div>
          </div>
        </el-scrollbar>


        <div style="font-weight: bold;font-size: 18px;">
          更多服务
        </div>

      </div>

      <el-scrollbar class="el-scrollbarService" style="background-color: #f9f9f9;height: 150px">
        <div class="scrollbar-flex-content">
          <div style="display: flex;flex-direction: column;">
            <div class="scrollbar-demo-item">
              <svg t="1726322271682" class="icon" viewBox="0 0 1024 1024" version="1.1" style="margin-left: 10px;"
                   xmlns="http://www.w3.org/2000/svg" p-id="4330" width="24" height="24">
                <path d="M399.052603 16.260909A402.420882 402.420882 0 0 1 819.931814 143.125301 400.076967 400.076967 0 0 1 890.395755 263.690421a124.520477 124.520477 0 0 1 84.527429 190.443082 124.373982 124.373982 0 0 1-90.826701 55.667978 45.266856 45.266856 0 0 1-25.636568-2.19742 27.394505 27.394505 0 0 1-14.649468-25.490074V294.01482a34.279755 34.279755 0 0 0-2.49041-9.08267A350.70826 350.70826 0 0 0 683.252279 98.151435a348.803829 348.803829 0 0 0-500.865306 191.908028 31.203367 31.203367 0 0 0-2.19742 8.057208v178.723507a50.247675 50.247675 0 0 1-1.171957 14.649468 26.369042 26.369042 0 0 1-16.260909 17.286372 44.827372 44.827372 0 0 1-19.776782 1.318452A124.520477 124.520477 0 0 1 134.776203 263.690421a402.860366 402.860366 0 0 1 263.690421-247.283017M85.553991 366.236696a70.170951 70.170951 0 0 0 6.006282 54.935505 71.489403 71.489403 0 0 0 35.012228 31.056871v-131.84521A71.489403 71.489403 0 0 0 85.553991 366.236696m811.873508-45.41335v131.845211a71.635898 71.635898 0 0 0 38.381606-37.795628 70.610435 70.610435 0 0 0 0-54.203031 71.782392 71.782392 0 0 0-39.114079-39.260573z m0 0" fill="#935f64" p-id="4331"></path><path d="M777.008873 342.944042a268.085262 268.085262 0 1 0-344.994967 297.823682 268.231756 268.231756 0 0 0 344.994967-297.823682z m-53.617052 78.814137a214.468209 214.468209 0 1 1-14.649468-123.202024 213.735736 213.735736 0 0 1 14.649468 123.202024z" fill="#935f64" p-id="4332"></path><path d="M891.128228 744.046472A491.343152 491.343152 0 0 0 775.104443 615.27765a49.808191 49.808191 0 0 0-13.331016-8.496692 27.101516 27.101516 0 0 0-25.636569 4.248346 382.351111 382.351111 0 0 1-156.309822 68.998994 367.408654 367.408654 0 0 1-169.201354-7.910713 387.038941 387.038941 0 0 1-123.202024-61.38127 26.955021 26.955021 0 0 0-22.120697-4.834325A38.674595 38.674595 0 0 0 248.602568 615.27765a485.776354 485.776354 0 0 0-100.20236 105.476168 538.074954 538.074954 0 0 0-95.368036 263.690421 78.521148 78.521148 0 0 0 0 18.45833 26.955021 26.955021 0 0 0 26.662032 21.095234h865.49056a26.955021 26.955021 0 0 0 26.808526-27.833989 542.03031 542.03031 0 0 0-80.865062-252.117342zM108.407161 970.527245a480.356051 480.356051 0 0 1 101.667307-242.155704 432.452291 432.452291 0 0 1 61.967249-62.260238 437.726099 437.726099 0 0 0 118.807184 56.546946 422.197663 422.197663 0 0 0 169.347848 14.649468 431.133839 431.133839 0 0 0 191.908029-71.635898 446.51578 446.51578 0 0 1 113.093892 141.074375 487.241301 487.241301 0 0 1 50.247675 163.488062z" fill="#935f64" p-id="4333"></path><path d="M456.039033 823.300093H556.241393a47.610771 47.610771 0 0 1 19.190803 2.050926 26.955021 26.955021 0 0 1-8.789681 51.859116h-108.992041a26.515537 26.515537 0 0 1-21.241728-11.280091 27.24801 27.24801 0 0 1-3.955356-23.439148 26.955021 26.955021 0 0 1 23.439148-19.190803z m0 0" fill="#935f64" p-id="4334"></path></svg>
              <span style="margin-left: 15px">我的客服</span>
            </div>
            <div class="scrollbar-demo-item">
              <svg t="1726325044604" class="icon" viewBox="0 0 1024 1024" version="1.1" style="margin-left: 10px;"
                   xmlns="http://www.w3.org/2000/svg" p-id="5589" width="24" height="24">
                <path d="M853.333333 1024H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V85.333333a87.893333 87.893333 0 0 1 9.386667-38.4A426.666667 426.666667 0 0 0 512 384a426.666667 426.666667 0 0 0 417.28-337.066667A87.893333 87.893333 0 0 1 938.666667 85.333333v853.333334a85.333333 85.333333 0 0 1-85.333334 85.333333z m-183.04-542.293333a42.666667 42.666667 0 0 0-62.72 0L512 578.56l-89.173333-89.6a42.666667 42.666667 0 0 0-60.586667 60.586667l51.2 50.773333A42.666667 42.666667 0 0 0 384 640a42.666667 42.666667 0 0 0 42.666667 42.666667h42.666666v42.666666H426.666667a42.666667 42.666667 0 0 0 0 85.333334h42.666666v85.333333a42.666667 42.666667 0 0 0 85.333334 0v-85.333333h42.666666a42.666667 42.666667 0 0 0 0-85.333334h-42.666666v-42.666666h42.666666a42.666667 42.666667 0 0 0 16.64-81.92l56.32-56.32a42.666667 42.666667 0 0 0 0-62.72zM512 298.666667a341.333333 341.333333 0 0 1-338.346667-298.666667h676.693334A341.333333 341.333333 0 0 1 512 298.666667z" p-id="5590" fill="#935f64"></path></svg>
              <span style="margin-left: 15px">拼手气会员红包</span>
            </div>
          </div>
          <div style="display: flex;flex-direction: column;">
            <div class="scrollbar-demo-item">
              <svg t="1726328248963" class="icon" viewBox="0 0 1024 1024" version="1.1"  style="margin-left: 10px;"
                   xmlns="http://www.w3.org/2000/svg" p-id="9854" width="29" height="29">
                <path d="M834.986667 233.386667H243.2A105.813333 105.813333 0 0 0 138.24 341.333333v194.986667a105.813333 105.813333 0 0 0 80.213333 102.826667v170.666666a105.386667 105.386667 0 0 0 104.96 103.253334H755.2a105.813333 105.813333 0 0 0 104.96-105.813334v-170.666666A106.24 106.24 0 0 0 938.666667 534.613333V341.333333a106.24 106.24 0 0 0-103.68-107.946666z m42.666666 301.226666a42.666667 42.666667 0 0 1-24.32 37.973334 31.146667 31.146667 0 0 0-23.893333-11.093334 32 32 0 0 0-32 32v213.333334a42.666667 42.666667 0 0 1-42.666667 42.666666H323.413333a42.666667 42.666667 0 0 1-42.666666-42.666666v-213.333334a32 32 0 0 0-32-32 30.293333 30.293333 0 0 0-23.893334 11.093334 42.666667 42.666667 0 0 1-24.32-37.973334V341.333333a42.666667 42.666667 0 0 1 42.666667-42.666666h591.786667a42.666667 42.666667 0 0 1 42.666666 42.666666z" p-id="9855" fill="#935f64"></path><path d="M686.08 429.653333l-195.413333 195.413334-98.133334-98.133334a16.64 16.64 0 0 0-23.893333 0 17.066667 17.066667 0 0 0 0 23.893334l110.08 110.08a17.066667 17.066667 0 0 0 23.893333 0l207.36-207.36a17.066667 17.066667 0 0 0-23.893333-23.893334z" p-id="9856" fill="#935f64"></path><path d="M888.746667 275.626667a186.453333 186.453333 0 0 0-349.44-90.453334 186.453333 186.453333 0 0 0-349.44 90.453334h46.506666a139.946667 139.946667 0 1 1 279.466667 0h46.506667a139.946667 139.946667 0 1 1 279.893333 0z" p-id="9857" fill="#935f64"></path></svg>
              <span style="margin-left: 15px">使用会员兑换码</span>
            </div>
            <!-- 935f64-->
            <div class="scrollbar-demo-item">
              <svg t="1726328369853" class="icon" viewBox="0 0 1024 1024" version="1.1" style="margin-left: 12px;"
                   xmlns="http://www.w3.org/2000/svg" p-id="11288" width="25" height="25">
                <path d="M516.379925 492.151487a246.07216 246.07216 0 1 1 246.07216-245.958395A246.299689 246.299689 0 0 1 516.379925 492.151487zM516.379925 57.003077a189.190015 189.190015 0 1 0 189.190015 189.190015A189.417543 189.417543 0 0 0 516.379925 57.003077z" p-id="11289" fill="#935f64"></path><path d="M837.536517 981.337936H812.16708a28.441073 28.441073 0 0 1 0-56.882145h25.596966a79.635003 79.635003 0 0 0 68.258574-119.111212L755.284935 543.117889a23.890501 23.890501 0 0 0-14.903122-11.376429A24.459322 24.459322 0 0 0 721.155648 534.813096a395.444673 395.444673 0 0 1-415.467189-3.98175 24.004265 24.004265 0 0 0-18.884872-3.071636 24.345558 24.345558 0 0 0-15.244415 11.376429L118.204909 805.344579a79.635003 79.635003 0 0 0 68.258574 119.111212h29.237423a28.441073 28.441073 0 0 1 0 56.882145H186.463483a136.517148 136.517148 0 0 1-118.087333-204.775723l153.80932-265.980911a81.113939 81.113939 0 0 1 113.764291-28.099779 338.335 338.335 0 0 0 355.627171 3.412928 81.227703 81.227703 0 0 1 112.512884 28.782366L955.510086 776.903506a136.517148 136.517148 0 0 1-117.973569 204.775723z" p-id="11290" fill="#935f64"></path><path d="M516.379925 1023.999545a27.986015 27.986015 0 0 1-18.202286-6.598329A858.124042 858.124042 0 0 1 332.76436 826.04968c-29.351187-48.691116-16.382058-122.979198 28.327309-162.114114 16.040765-13.993008 72.12656-52.559102 155.40202 3.412929 83.275461-55.972031 139.247491-17.405936 155.288257-3.412929 44.709366 39.134916 57.678495 113.76429 28.327308 162.114114A858.124042 858.124042 0 0 1 534.582212 1017.401216 27.986015 27.986015 0 0 1 516.379925 1023.999545z m-85.550746-329.347621a47.439709 47.439709 0 0 0-32.195294 12.059015C374.629619 728.21239 366.324826 771.44282 381.569241 796.470964A789.63794 789.63794 0 0 0 516.379925 957.561199 789.865468 789.865468 0 0 0 651.304374 796.470964c15.244415-25.255672 7.053386-68.94116-16.95088-89.987554-32.195294-28.213544-76.563367-0.79635-100.112575 18.088523a28.554837 28.554837 0 0 1-35.608223 0c-16.382058-12.855365-42.547845-29.920008-67.803517-29.920009z" p-id="11291" fill="#935f64"></path></svg>
              <span style="margin-left: 17px">赠送好友会员</span>
            </div>
          </div>
        </div>
      </el-scrollbar>

    </div>

  </div>
</template>


<script setup lang="ts">
import {ref} from "vue";
import {Axios} from "axios";
import {getESUserNameAndId} from "../api/esApi.ts";
import {useRouter} from "vue-router";
import {userStore} from "../stores/user/user.ts";
import {selectUserById} from "../api/userApi.ts";
import {showToast} from "vant";

const user = {
  username: '张三',
  email: '123456@qq.com',
  phone: '13923370743',
  address: '北京市海淀区西二旗',
  userStatus: 1,
  avatarUrl: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
}

const agree = ref(false);
const zhifubao = ref(false);
const weixin = ref(false);

</script>

<style scoped>
.banner {
  background-color: #f8f8f8;
  padding-top: 5px;
  text-align: center;
}


.el-scrollbarService {
  height: 80px; /* 隐藏滚动条 */
}
.el-scrollbarPrice{
  background-color: #f9f9f9;
  height: 120px;
  margin-top: 10px;
}

.scrollbar-flex-content {
  display: flex;
}
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: left;
  width: 180px;
  height: 50px;
  margin: 8px;
  text-align: center;
  border-radius: 4px;
  /*background: var(--el-color-danger-light-9);*/
  background: #ffffff;
  /*color: var(--el-color-danger);*/
  color: black;
}

.scrollbar-flex-content-price {
  display: flex;
}
.scrollbar-demo-item-price {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 110px;
  margin: 10px 10px 10px 0;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}

</style>